<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cls{
            width: 200px;
            height: 200px;
            background-color:skyblue;
        }
    </style>
</head>
<style>
   
</style>

<body>
    <div id="app">
       <com>
            <div>我是插槽01</div>
            <template #footer>
                <div>我是插槽02</div>
            </template>
       </com>
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>

    const {h,createApp} = Vue;

    let com = {
        // 组件的模板使用template。
        // template:`
        //     <div class="cls">组件</div>
        // `        

        // 组件的模板使用render函数。

        // render():是渲染函数，渲染一个虚拟节点（vNodes)，
        // h():h函数是用来创建虚拟节点

        // render(){
        //     let vNode = h("div",{
        //         "class":"cls",
        //         "innerHTML":"组件"
        //     });
        //     console.log("vNode",vNode);
        //     return vNode; 
        // }

        render(){
            return [
                h("div",{
                    "class":"cls",
                    "innerHTML":"组件"
                }),
                h("div",{
                    "id":"box2",
                },
                "id为box2的div标签"
                ),
                h("div",{"id":"box3"},
                    [
                        h("p",{"id":"p01"},"我是个p"),
                        h("p",{"id":"p02"},[
                            h("span",{
                                "id":"span01"
                            }),
                            h("span",{
                                "id":"span02"
                            },"我是第二个span")
                        ])
                    ]
                ),
                h("div",{"id":"box4"},this.$slots.default()),
                h("div",{"id":"box5"},this.$slots.footer())
            ]
        }
    }

    // 1、创建一个应用
    let app = Vue.createApp({
        components:{
            com
        },
        data() {
            return {
                msg: "hi"
            }
        }
    });

    // 2、把应用进行渲染（和模板进行关联）
    app.mount("#app");


</script>